<template>
  <div class="snake_container">
    <div
      class="grid_item"
      v-for="(item, index) in props.snakeSteps"
      :key="item.id"
      :class="isEvenRow(index) ? 'row_even' : 'row_odd'"
      :style="`--i:${numberToLetter(index + 1)}`"
    >
      <div class="step" :class="item.status" @click="handleStepClick(item)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { ref, computed } from 'vue'
import type { IProps, ISnakeStep } from './type'

defineOptions({
  // 组件名称
  name: 'SnakeSteps',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

// const stepList = [
//   { id: '1', name: '确定意向', status: 'finished', description: 'ssss' },
//   { id: '2', name: '对接洽谈', status: 'finished' },
//   { id: '3', name: '制定方案', status: 'wait' },
//   { id: '4', name: '项目报价', status: 'wait' },
//   { id: '5', name: '投标评审', status: 'wait' },
//   { id: '6', name: '合同拟定', status: 'wait' },
//   { id: '7', name: '合同签订', status: 'finished' },
//   { id: '8', name: '转化完成', status: 'finished' },
//   { id: '9', name: '合同跟踪', status: 'finished' },
//   { id: '10', name: '合同回款', status: 'wait' },
//   { id: '11', name: '项目交付', status: 'wait' },
//   { id: '13', name: '项目验收', status: 'wait' },
//   { id: '14', name: '项目结束', status: 'wait' }
// ]

const props = defineProps<IProps>()

const cols = ref<number>(6)
const count = computed(() => props.snakeSteps.length ?? 1)
const rows = computed(() => Math.ceil(count.value / cols.value))
const areas = computed(() => {
  let s = ''
  for (let i = 1; i <= rows.value; i++) {
    let r = ''
    for (let j = 1; j <= cols.value; j++) {
      if (i % 2 === 0) {
        r = numberToLetter(cols.value * (i - 1) + j) + ' ' + r
      } else {
        r = r + ' ' + numberToLetter(cols.value * (i - 1) + j)
      }
    }
    s += `'${r.trim()}'` + '\n'
  }
  return s
})

const emit = defineEmits(['stepClick'])

const handleStepClick = (dto: ISnakeStep) => {
  emit('stepClick', dto)
}
function isEvenRow(n: number, c = cols.value) {
  const row = Math.floor(n / c) + 1
  return row % 2 === 0
}

function numberToLetter(x: number) {
  let s = ''
  while (x > 0) {
    let m = x % 26
    m = m === 0 ? (m = 26) : m
    s = String.fromCharCode(96 + m) + s
    x = (x - m) / 26
  }
  return s
}
</script>

<style scoped lang="scss">
// @use 'sass:math';

$itemCount: 13;
$colNum: 6;
$rows: 3; // 总行数
// $colEven: $colNum * 2; // 两行元素数
$lineWidth: 35px; // 步骤间连线长度
$rowDistance: 50px; // 行间距
$colDistance: 35px; // 列间距
$arrowSize: 6px; // 箭头大小
$stepColor: #9e9e9e; // 步骤颜色

.snake_container {
  width: 100%;
  display: grid;
  padding: 30px 0;
  grid-template-columns: repeat($colNum, 1fr);
  gap: $rowDistance $colDistance;
  grid-template-areas: v-bind(areas);
  .grid_item {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    grid-area: var(--i);
    cursor: pointer;
    &::before,
    &::after {
      position: absolute;
      content: '';
    }
    &::before {
      right: -$lineWidth;
      width: $lineWidth;
      height: 0;
      border-top: 1px dashed $stepColor;
    }
    &::after {
      right: -18px;
      transform: translateX(50%);
      border-top: calc($arrowSize / 1.4) solid transparent;
      border-left: $arrowSize solid $stepColor;
      border-bottom: calc($arrowSize / 1.4) solid transparent;
    }
    &:nth-child(#{$colNum}n) {
      &:not(:last-child) {
        .step {
          &::before,
          &::after {
            position: absolute;
            content: '';
            left: 50%;
            bottom: -28px;
            transform: translate(-50%, 50%);
          }
          &::before {
            height: $lineWidth;
            border-left: 1px dashed $stepColor;
          }
          &::after {
            border-top: $arrowSize solid $stepColor;
            border-left: calc($arrowSize / 1.4) solid transparent;
            border-right: calc($arrowSize / 1.4) solid transparent;
          }
        }
      }
    }
    &:row_odd {
      &:last-child {
        &::before,
        &::after {
          display: none;
        }
      }
    }
    &:nth-child(#{$colNum}) {
      &::before,
      &::after {
        display: none;
      }
    }
    &:nth-child(#{$colNum}n + 1):nth-child(n + 3) {
      &::before,
      &::after {
        display: none;
      }
    }
    &.row_even {
      &::after {
        transform: rotate(180deg) !important;
      }
    }

    .step {
      position: relative;
      width: 100px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      border-radius: 5px;
      color: #9e9e9e;
      border: 2px solid #9e9e9e;
      &.finish {
        background-color: #81c083;
        color: #fff;
        border: 2px solid #4caf50;
      }
      &.success {
        background: #2196f3;
        color: #fff;
        border: 2px solid #2196f3;
      }
      &.process {
        animation: rotate 2s linear infinite;
        background-color: #d663cf;
        color: #fff;
        border: 2px solid;
      }
    }
  }
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
</style>
